<!--  -->
<template>
  <view class="order-card">
    <view class="order-card__header">
      <view>订单号：{{ item.orderSn }}</view>
      <c-tag :text="statusMap[item.orderStatus]" type="green" border />
    </view>
    <view class="order-card__body">
      <view class="mb-2">购买日期：{{ dateFormat(item.createTime, 'YYYY-MM-DD HH:mm:ss') }}</view>
      <view
        >有效期：{{ dateFormat(item.beginTime, 'YYYY-MM-DD HH:mm:ss') }}-{{
          dateFormat(item.endTime, 'YYYY-MM-DD HH:mm:ss')
        }}</view
      >
    </view>

    <view class="order-card__footer" v-if="item.orderStatus === 1">
      <c-button plain size="medium" @click="handleCancel(item.id)">取消付款</c-button>
      <c-button size="medium" @click="handlePay(item.payOrderId)">去付款</c-button>
    </view>
  </view>
</template>

<script lang="ts" setup>
  import { dateFormat } from '@/utils';
  import { cancelOrder } from '@/service/order';
  import { payRequest } from '@/utils/pay';
  defineProps({
    item: {
      type: Object,
      default: () => ({}),
    },
  });
  const statusMap = {
    1: '待付款',
    2: '已过期',
    3: '已付款',
  };
  const emit = defineEmits(['refresh']);

  const handleCancel = (id) => {
    uni.showModal({
      title: '取消订单',
      content: '确认取消订单吗？',
      success: (res) => {
        if (res.confirm) {
          cancelOrder(id).then((res) => {
            uni.showToast({
              title: '取消订单成功',
            });
            emit('refresh');
          });
        }
      },
    });
  };
  const handlePay = (id) => {
    payRequest(id, () => {
      emit('refresh');
    });
  };
</script>

<style lang="scss" scoped>
  .order-card {
    background:
      linear-gradient(180deg, rgba(255, 255, 255, 0.75) 0%, rgba(255, 255, 255, 0.7) 100%), #fefefe;
    border-radius: 20rpx;
    padding: 32rpx;

    &__header {
      display: flex;
      justify-content: space-between;
      margin-bottom: 24rpx;
      & > view {
        font-weight: 600;
        font-size: 32rpx;
        color: $uni-color-title;
      }
    }
    &__body {
      padding: 24rpx;
      background: rgba(62, 70, 84, 0.05);
      border-radius: 20rpx;
      & > view {
        color: rgba(62, 70, 84, 0.35);
      }
    }
    &__footer {
      display: flex;
      justify-content: flex-end;
      margin-top: 24rpx;
      gap: 24rpx;
    }
  }
</style>
